<style lang="less">
  @import './login.less';
  // @import './theme/theme.less';
</style>

<template>
  <div class="hro-login" id="login">
    <!-- <canvas id="canvas"></canvas> -->
    <img :src="logo_vx" alt="" class="logo_vx">
    <!-- <img :src="logo_knx" alt="" class="logo_knx"> -->
    <div :class="logoImgClass"></div>
    <div :class="sloganClass">
      <div class="text"></div>
    </div>
    <div class="login-con">
      <div class="form-con">
        <login-form @on-success-valid="handleSubmit" :loading="loading"></login-form>
      </div>
    </div>
    <p class="b-text line-h-30">Copyright © 2019-2021 湖南谋谋网络科技有限公司 All Rights Reserved<br/>技术支持：谋谋科技  |  <a class="text-white" target=_blank @click="linkDownload">湘ICP备15015077号-2</a> <br/><span class="pl-30">邮箱：mmkj_ceo@163.com</span></p>
  </div>
</template>

<script>
import userApi from '@/api/user'
import Cookies from 'js-cookie'
import { SysAreaApi } from '@/api/SysArea.api.js'
import fxzpApi from '@/api/fx-zp.api.js'
import { Common } from '@/utils/common.js'
import LoginForm from '_c/login-form'
import { mapMutations, mapActions } from 'vuex'
import store from '@/store'
import systemApi from '@/api/system.js'
import logo_vx from '@/assets/images/Logo_VXHRO-CLOUD.png'
import config from '@/config'
// import logo_knx from '@/assets/images/Logo_KNX.png'
// import login_box from '@/assets/images/login-box.png'
// import login_box from './shengdan/image/login-box-shengdan.png'
const logoImgUrl = process.env.NODE_ENV === 'development' ? config.logoUrl.dev : config.logoUrl.pro
const logoImgClass = process.env.NODE_ENV === 'development' ? config.logoClass.dev : config.logoClass.pro
const sloganClass = process.env.NODE_ENV === 'development' ? config.slogan.dev : config.slogan.pro

export default {
  components: {
    LoginForm
  },
  data () {
    return {
      loading: false,
      logo_vx: logo_vx,
      logo_knx: logoImgUrl,
      sloganClass: sloganClass,
      logoImgClass: logoImgClass,
      // login_box: login_box,
      activeClass: '1'
    }
  },
  created () {
    Cookies.set('clientToken', '')
    this.setClientToken('')
    this.setAccess([])
    this.setMessageCheckAllowLogin({
      code: null,
      data: null,
      message: null,
      success: true,
      totalPages: 0,
      totalRows: 0
    })
    localStorage.clear()
  },
  mounted () {
    // this.canvasLine()
    // this.canvasShengdan()
  },

  methods: {
    ...mapMutations([
      'setClientToken',
      'setUserId',
      'setAccess',
      'setUserName',
      'setAvator',
      'setHasGetInfo',
      'setCompanyID',
      'setMessageCheckAllowLogin'
    ]),
    ...mapActions([
      'handleLogin'
    ]),

    handleSubmit ({ userName, password }) {
      userName = userName.trim()
      this.loading = true
      userApi.login({
        userName,
        password
      }).then(res => {
        const data = res.data
        if (data.success) {
          // store.dispatch('getLodinStatus', data)
          localStorage.setItem('clientLoginInfo', JSON.stringify(data))
          let access_arr = data.data.menus.map(item => {
            return item.code
          })
          this.setClientToken(data.data.access_token)
          this.setHasGetInfo(true)
          this.setUserId()
          this.setAccess(access_arr)
          this.setUserName(data.data.name)
          this.setAvator('@/assets/images/default_photo1.png')
          // this.$router.push({
          //   name: this.$config.homeName
          // })
          // if (this.$rou) {}
          console.log('⭐', this.$route.query.viewData)
          if (this.$route.query.viewData) {
            this.$router.push({
              path: '/data-screening-once',
              name: 'data-screening-once'
            })
          } else {
            this.$router.push({
              name: this.$config.homeName
            })
          }
          this.getProvince()
          this.getAreaTree()
          this.getFXZPSelectVal()
        } else {
          this.$Message.error(data.message)
          this.loading = false
        }
      })
    },

    chooseIdentity (e) {
      this.activeClass = e.srcElement.dataset.id
    },

    // 获取全国省份
    async getProvince () {
      let resp = await SysAreaApi.getProvince()
      if (resp.status === 200) {
        localStorage.setItem('provinceList', JSON.stringify(resp.data.data))
      }
    },

    // 获取中国所有城市树
    async getAreaTree () {
      let res = await SysAreaApi.getAreaTree()
      console.log('获取中国所有城市树: ', res)
      if (res.status === 200 && res.data.success) {
        localStorage.setItem('areaTree', JSON.stringify(res.data.data))
      } else {
      }
    },
    // 获取分享招聘系统下拉值
    getFXZPSelectVal () {
      fxzpApi.GetSelectValList({
        intPageSize: 10000,
        intPageIndex: 1
      }).then(res => {
        console.log(res)
        localStorage.setItem('FXZP_STATUS', JSON.stringify(res.data.data))
      })
    },
    canvasShengdan () {

      var c = document.getElementById('canvas'),
      $ = c.getContext("2d"),
      w = c.width = window.innerWidth,
      h = c.height = window.innerHeight

      function makeItSnow() {
        var snow, f,
          arr = [],
          num = 1500,
          tsc = 1,
          sp = 1,
          sc = 0.7,
          t = 0,
          mv = 20,
          min = 1
        for (var i = 0; i < num; ++i) {
          snow = new Flake()
          snow.y = Math.random() * (h + 50)
          snow.x = Math.random() * w
          snow.t = Math.random() * (Math.PI * 2)
          snow.sz = (100 / (10 + (Math.random() * 100))) * sc
          snow.sp = (Math.pow(snow.sz * .8, 2) * .15) * sp
          snow.sp = snow.sp < min ? min : snow.sp
          arr.push(snow)
        }
        go();

        function go() {
          window.requestAnimationFrame(go)
          $.clearRect(0, 0, w, h)
          $.fillRect(0, 0, w, h)
          $.fill()
          for (var i = 0; i < arr.length; ++i) {
            f = arr[i]
            f.t += .05
            f.t = f.t >= Math.PI * 2 ? 0 : f.t
            f.y += f.sp
            f.x += Math.sin(f.t * tsc) * (f.sz * .3)
            if (f.y > h + 50) f.y = -10 - Math.random() * mv
            if (f.x > w + mv) f.x = -mv
            if (f.x < -mv) f.x = w + mv
            f.draw()
          }
        }

        function Flake() {
          this.draw = function () {
            this.g = $.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.sz)
            this.g.addColorStop(0, 'hsla(255,255%,255%,1)')
            this.g.addColorStop(1, 'hsla(255,255%,255%,0)')
            $.moveTo(this.x, this.y)
            $.fillStyle = this.g
            $.beginPath()
            $.arc(this.x, this.y, this.sz, 0, Math.PI * 2, true)
            $.fill()
          }
        }
      }
      makeItSnow()
    },
    canvasLine () {
      function n (n, e, t) {
        return n.getAttribute(e) || t
      }

      function e (n) {
        return document.getElementsByTagName(n)
      }

      function t () {
        var t = e('script'),
          o = t.length,
          i = t[o - 1]
        return {
          l: o,
          z: n(i, 'zIndex', 1),
          o: n(i, 'opacity', 1),
          c: n(i, 'color', '15,167,255'), // 控制线条的颜色的地方
          n: n(i, 'count', 180)
        }
      }

      function o () {
        a = m.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, c = m.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
      }

      function i () {
        r.clearRect(0, 0, a, c)
        var n, e, t, o, m, l
        s.forEach(function (i, x) {
          for (i.x += i.xa, i.y += i.ya, i.xa *= i.x > a || i.x < 0 ? -1 : 1, i.ya *= i.y > c || i.y < 0 ? -1 : 1, r.fillRect(i.x - 0.5, i.y - 0.5, 1, 1), e = x + 1; e < u.length; e++) n = u[e], n.x !== null && n.y !== null && (o = i.x - n.x, m = i.y - n.y, l = o * o + m * m, l < n.max && (n === y && l >= n.max / 2 && (i.x -= 0.03 * o, i.y -= 0.03 * m), t = (n.max - l) / n.max, r.beginPath(), r.lineWidth = t / 2, r.strokeStyle = 'rgba(' + d.c + ',' + (t + 0.2) + ')', r.moveTo(i.x, i.y), r.lineTo(n.x, n.y), r.stroke()))
        }), x(i)
      }
      // var wave = document.getElementById('login')
      var a, c, u, m = document.createElement('canvas'),

        d = t(),
        l = 'c_n' + d.l,
        r = m.getContext('2d'),
        x = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (n) {
          window.setTimeout(n, 1e3 / 45)
        },
        w = Math.random,
        y = {
          x: null,
          y: null,
          max: 2e4
        }
      m.id = l, m.style.cssText = 'position:fixed;top:0;left:0;z-index:' + d.z + ';opacity:' + d.o, document.getElementById('login').appendChild(m), o(), window.onresize = o, window.onmousemove = function (n) {
        n = n || window.event, y.x = n.clientX, y.y = n.clientY
      }, window.onmouseout = function () {
        y.x = null, y.y = null
      }
      for (var s = [], f = 0; d.n > f; f++) {
        var h = w() * a,
          g = w() * c,
          v = 2 * w() - 1,
          p = 2 * w() - 1
        s.push({
          x: h,
          y: g,
          xa: v,
          ya: p,
          max: 6e3
        })
      }
      u = s.concat([y]), setTimeout(function () {
        i()
      }, 100)
      // wave.appendChild(canvas)
    },

    // 点击备案号
    linkDownload () {
      // window.open('http://www.baidu.com', '_blank')
      window.open('http://beian.miit.gov.cn', '_blank')
    }
  }
}
</script>
